<extend name="Common/index" />
<block name="css">
	<style type="text/css">
		.pagination {
			margin: 20px 0;
		}
		.pagination ul {
			display: inline-block;
			list-style:none;
			*display: inline;
			/* IE7 inline-block hack */
			*zoom: 1;
			margin-left: 0;
			margin-bottom: 0;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		}
		.pagination ul > li {
			display: inline;
		}
		.pagination ul > li > a,
		.pagination ul > li > span,
		.pagination #lastspan {
			float: left;
			padding: 4px 12px;
			line-height: 20px;
			text-decoration: none;
			background-color: #ffffff;
			border: 1px solid #dddddd;
			border-left-width: 0;
		}
		.pagination ul > li > a:hover,
		.pagination ul > li > a:focus,
		.pagination ul > .active > a,
		.pagination ul > .active > span {
			background-color: #f5f5f5;
		}
		.pagination ul > .active > a,
		.pagination ul > .active > span {
				color: #999999;
				cursor: default;
		}
		.pagination ul > .disabled > span,
		.pagination ul > .disabled > a,
		.pagination ul > .disabled > a:hover,
		.pagination ul > .disabled > a:focus {
			color: #999999;
			background-color: transparent;
			cursor: default;
		}
		.pagination ul > li:first-child > a,
		.pagination ul > li:first-child > span {
			border-left-width: 1px;
			-webkit-border-top-left-radius: 4px;
			-moz-border-radius-topleft: 4px;
			border-top-left-radius: 4px;
			-webkit-border-bottom-left-radius: 4px;
			-moz-border-radius-bottomleft: 4px;
			border-bottom-left-radius: 4px;
		}
		.pagination ul > li:last-child > a,
		.pagination ul > li:last-child > span,
		.pagination #lastspan {
			-webkit-border-top-right-radius: 4px;
			-moz-border-radius-topright: 4px;
			border-top-right-radius: 4px;
			-webkit-border-bottom-right-radius: 4px;
			-moz-border-radius-bottomright: 4px;
			border-bottom-right-radius: 4px;
		}
		.pagination-centered {
			text-align: center;
		}
		.pagination-right {
			text-align: right;
		}
		.pagination-large ul > li > a,
		.pagination-large ul > li > span,
		.pagination-large #lastspan{
			padding: 11px 19px;
			font-size: 17.5px;
		}
		.pagination-large ul > li:first-child > a,
		.pagination-large ul > li:first-child > span {
			-webkit-border-top-left-radius: 6px;
			-moz-border-radius-topleft: 6px;
			border-top-left-radius: 6px;
			-webkit-border-bottom-left-radius: 6px;
			-moz-border-radius-bottomleft: 6px;
			border-bottom-left-radius: 6px;
		}
		.pagination-large ul > li:last-child > a,
		.pagination-large ul > li:last-child > span,
		.pagination-large #lastspan {
			-webkit-border-top-right-radius: 6px;
			-moz-border-radius-topright: 6px;
			border-top-right-radius: 6px;
			-webkit-border-bottom-right-radius: 6px;
			-moz-border-radius-bottomright: 6px;
			border-bottom-right-radius: 6px;
		}
		.pagination-mini ul > li:first-child > a,
		.pagination-small ul > li:first-child > a,
		.pagination-mini ul > li:first-child > span,
		.pagination-small ul > li:first-child > span {
			-webkit-border-top-left-radius: 3px;
			-moz-border-radius-topleft: 3px;
			border-top-left-radius: 3px;
			-webkit-border-bottom-left-radius: 3px;
			-moz-border-radius-bottomleft: 3px;
			border-bottom-left-radius: 3px;
		}
		.pagination-mini ul > li:last-child > a,
		.pagination-small ul > li:last-child > a,
		.pagination-mini ul > li:last-child > span,
		.pagination-small ul > li:last-child > span {
			-webkit-border-top-right-radius: 3px;
			-moz-border-radius-topright: 3px;
			border-top-right-radius: 3px;
			-webkit-border-bottom-right-radius: 3px;
			-moz-border-radius-bottomright: 3px;
			border-bottom-right-radius: 3px;
		}
		.pagination-small ul > li > a,
		.pagination-small ul > li > span {
			padding: 2px 10px;
			font-size: 11.9px;
		}
		.pagination-mini ul > li > a,
		.pagination-mini ul > li > span {
			padding: 0 6px;
			font-size: 10.5px;
		}
		.layui-form-item{
			margin-bottom: 0;
		}
		#greetings{
			position: absolute;
			height: auto;
			border-left: 1px solid rgba(0, 0, 0, 0.11);
			border-right: 1px solid rgba(0, 0, 0, 0.11);
			left: 0px;
			z-index:5555; 
		}
		#greetings ul{
			list-style: none;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.44);
			-webkit-margin-before: 0em;
			-webkit-margin-after: 0em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
			-webkit-padding-start: 0px;
		}
		#greetings li{
			text-align: left;
			padding: 5px;
			font-family: inherit;
			border-bottom: 1px solid rgba(0, 0, 0, 0.16);
			height: 25px;
			width: 180px;
			line-height: 25px;
			background-color: rgba(255, 255, 255, 0.8);
			cursor: pointer;
		}
		#greetings li:hover{
			background-color: rgba(175, 42, 0, 0.52);
			color: white;
		}
	</style>
</block>
<block name="content">
	<nav class="breadcrumb hidden">
		<i class="Hui-iconfont">&#xe67f;</i>
		<a href="{:U('Index/elcome')}">首页</a>
		<span class="c-gray en">&gt;</span> 管理后台
		<span class="c-gray en">&gt;</span> 资源
		<span class="c-gray en">&gt;</span> 小区管理
		<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
			<i class="Hui-iconfont">&#xe68f;</i>
		</a>
	</nav>
	<link rel="stylesheet" href="__PUBLIC__/lib/layui/css/layui.css" media="all">
	<div class="page-container">
		<form class="layui-form" action="{:U('Ziyuan/xiaoqu')}" method="get" id="form">
			<div align="center">
				<div class="layui-inline">
					<div class="layui-input-inline" style="width:300px;">
						<input type="text" name="sousuo" list="greetings" autocomplete="off" placeholder="请输入小区名" class="layui-input" id="sousuo">
						<div id="greetings" >
							<ul id="tcontent"></ul>
						</div>
					</div>
				</div>
				<div class="layui-inline">
					&nbsp;&nbsp;
					<button class="layui-btn layui-btn-radius" lay-submit="" lay-filter="demo1">
						<i class="Hui-iconfont">&#xe665;</i>查找小区
					</button>
					<button type="reset" class="layui-btn layui-btn-radius layui-btn-primary">重置</button>
				</div>
				<div>&nbsp;</div>
			</div>
		</form>
		<table id="table" class="table table-border table-bordered table-hover table-bg">
			<thead>
				<tr>
					<th scope="col" colspan="12">
							<a class="btn btn-primary radius" href="javascript:;" onclick="layer_show('添加小区','{:U('Ziyuan/addXiaoqu')}','960')">
								<i class="Hui-iconfont">&#xe600;</i> 添加小区
							</a>
						<span style="float: right;">

							<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
								<i class="Hui-iconfont">&#xe68f;</i>
							</a>
						</span>
					</th>
				</tr>
				<tr class="text-c">
					<th width="40">序号</th>
					<th width="80">小区名称</th>
					<th width="80">拼音检索</th>
					<th width="80">所属片区</th>
					<th width="80">所属行政区</th>
					<th width="80">所属学区</th>
					<th width="80">座栋规则</th>
					<th width="80">地图坐标</th>
					<th width="80">小区地址</th>
					<th width="80">操作</th>
				</tr>
			</thead>
			<tbody id="xsjxiaoq">
				<volist name="xiaoqu" id="xq">
					<tr class="text-c" data-href="{:U('Ziyuan/xiaoqurr',array('id'=>$xq['id']))}" data-title="<if condition='$xq.xiaoqum'>{$xq.xiaoqum}</if>" ondblclick="Hui_admin_tabb(this)">
						<td>{$i+$firstRow}</td>
						<td id="td">
							<a data-href="{:U('Ziyuan/xiaoqurr',array('id'=>$xq['id']))}" data-title="<if condition='$xq.xiaoqum'>{$xq.xiaoqum}</if>" href="javascript:;" style="text-decoration:none">
								{$xq.xiaoqum}
							</a>
						</td>
						<td>{$xq.pinyinjs}</td>
						<td>
							<foreach name="sspianqu" item="pq">
								<if condition='$xq["sspianqu"] eq $pq["id"]'>{$pq.pianqum}</if>
							</foreach>
						</td>
						<td>
							<foreach name="ssxzq" item="xzq">
								<if condition='$xq["ssxzq"] eq $xzq["id"]'>{$xzq.xzqming}</if>
							</foreach>
						</td>
						<td>{$xq.ssxuexiao}</td>
						<td>{$xq.zdguize}</td>
						<td>{$xq.dituzb}</td>
						<td>{$xq.xiaoqudz}</td>
						<td class="f-14" id="td">
							<a title="详情" data-href="{:U('Ziyuan/xiaoqurr',array('id'=>$xq['id']))}" data-title="<if condition='$xq.xiaoqum'>{$xq.xiaoqum}</if>" href="javascript:;" style="text-decoration:none">
								<i class="Hui-iconfont" style="font-size: 22px;">&#xe720;</i>
							</a>
							<a title="编辑" href="javascript:;" onclick="layer_show('编辑小区','{:U('Ziyuan/editXiaoqu',array('id'=>$xq['id']))}','960')" style="text-decoration:none" class="ml-5">
								<i class="Hui-iconfont" style="font-size: 18px;">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="admin_xiaoqu_del(this,'{$xq.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont" style="font-size: 22px;">&#xe6e2;</i>
							</a>
						</td>
					</tr>
				</volist>
			</tbody>
		</table>
		<div style="height: 50px;"></div>
		<div class="pagination" style="width:100%;height:30px;margin:0 auto;background:#fff;position:fixed;bottom:0;text-align:center;">
			{$page}
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript" src="__PUBLIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript" src="__PUBLIC__/lib/layer/2.4/layer.js"></script>
	<script src="__PUBLIC__/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		$("#table").on("click","#td a",function(){
			Hui_admin_tab(this);
		});
		function admin_xiaoqu_del(obj,id){
			layer.confirm('小区删除须谨慎，确认要删除吗？',function(index){
				$.ajax({
					type: 'POST',
					url: '{:U('Ziyuan/delXiaoqu')}',
					data: {'id':id},
					dataType: 'json',
					success: function(data){
						$(obj).parents("tr").remove();
						layer.msg('已删除!',{icon:1,time:1000});
					},
					error:function(data) {
						console.log(data.msg);
					},
				});
			});
		}
		function xsjxiaoq(){
			$.ajax({
				url:'{:U('Ziyuan/get_xiaoqxsj')}',
				Type:"POST",
				dataType:"json",
				success:function(data){
					var pics = data.pics;
					var sj='<tr class="text-c"><td style="color:red">new</td><td><a data-href="{:U('Ziyuan/xiaoqurr')}" data-title="<if condition='$xq.xiaoqum'>{$xq.xiaoqum}</if>" href="javascript:;" style="text-decoration:none">'+pics["xiaoqum"]+'</a></td><td>'+pics["pinyinjs"]+'</td><td></td><td></td><td>'+pics["ssxuexiao"]+'</td><td>'+pics["dituzb"]+'</td><td></td></tr>';
					$("#xsjxiaoq").prepend(sj);
				}
			});
		};
		layui.use(['form', 'layedit', 'laydate'], function(){
			var form = layui.form()
			,layer = layui.layer
			,layedit = layui.layedit
			,laydate = layui.laydate;
			form.on('checkbox(checkbox)', function(data){
				$('form').submit();
			});
			$("#sousuo").keyup(function(){
				$("#greetings").show();
				var txt=$("#sousuo").val();
				if (txt!="") {
					$.ajax({
						url:'{:U('Ziyuan/get_xiaoqu')}',
						Type:"POST",
						data:"txt="+txt,
						dataType:"json",
						success:function(data){
							var district = data.district;
							$("#tcontent li").remove();
							for(var i in district){
								var li=$("<li></li>");
								$(li).html(district[i]['xiaoqum']);
								$("#tcontent").append(li);
							}
						}
					});
				}
			});
			$("#tcontent").on("click","li", function() {  
				$("#greetings").show(); 
				//var v=$(this).text(); alert(v);        
				var Uarry=$("#tcontent li");  
				var count=$(this).index();//获取li的下标  
				var Tresult=Uarry.eq(count).text();  
				$("#sousuo").val(Tresult); 
				$("#greetings").hide(); 
			})
			$("body").click(function(){
				$("#greetings").hide();
			});
		});
	</script>
</block>
        
        